﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>Google Maps JavaScript API v3 Example: Directions Complex</title>
    <link href="google.css"
       rel="stylesheet" type="text/css">
    <style type="text/css">
      #directions-panel {
        height: 100%;
        float: right;
        width: 390px;
        overflow: auto;
      }

      #map-canvas {
        margin-right: 400px;
      }

      #control {
        background: #fff;
        padding: 5px;
        font-size: 14px;
        font-family: Arial;
        border: 1px solid #ccc;
        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
        display: none;
      }

      @media print {
        #map-canvas {
          height: 500px;
          margin: 0;
        }

        #directions-panel {
          float: none;
          width: auto;
        }
      }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZMHncOTQg7gJGD2SVhrloJtNmxMtF4k0&sensor=false"></script>
    <script type="text/javascript">
        var directionDisplay;
        var directionsService = new google.maps.DirectionsService();

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var myOptions = {
                zoom: 7,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: new google.maps.LatLng(56.14758, 8.98802)
            };
            var map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('directions-panel'));

//            var control = document.getElementById('control');
//            control.style.display = 'block';
//            map.controls[google.maps.ControlPosition.TOP].push(control);
        }

//        function calcRoute() {
//            var start = document.getElementById('start').value;
//            var end = document.getElementById('end').value;
//            var request = {
//                origin: start,
//                destination: end,
//                travelMode: google.maps.DirectionsTravelMode.DRIVING
//            };
//            directionsService.route(request, function (response, status) {
//                if (status == google.maps.DirectionsStatus.OK) {
//                    directionsDisplay.setDirections(response);
//                }
//            });
//        }

        function calcRoute() {
            var start = document.getElementById("start").value;
            var end = document.getElementById("end").value;
            var waypts = [];
            var checkboxArray = document.getElementById("waypoints");
            for (var i = 0; i < checkboxArray.length; i++) {
                if (checkboxArray.options[i].selected == true) {
                    waypts.push({
                        location: checkboxArray[i].value,
                        stopover: true
                    });
                }
            }

            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div style="margin:20px;border-width:2px;">
      <strong>Start:</strong>
      <select id="start" onchange="calcRoute();">
        <option value="København, Danmark">København</option>
        <option value="Odense, Danmark">Odense</option>
        <option value="Herning, Danmark">Herning</option>
        <option value="Søndersø, Danmark">Søndersø</option>
      </select>
      <b>Waypoints:</b> <br />
            <i>(Ctrl-Click for multiple selection)</i> <br />
            <select multiple="multiple" id="waypoints">
              <option value="birkemosevej 51, 5471 søndersø, danmark">Søndersø</option>
              <option value="Lupinvej 12, 5560 aarup, danmark">Aarup</option>
              <option value="Barmosevej 26, 5220 Odense SØ, danmark">Odense SØ</option>
              <option value="Svendborgvej 46, 5772 Kværndrup, Danmark">Kværndrup</option>
              <option value="Silkeborgvej 2, 8000 Århus C, Danmark">Århus</option>
              <option value="Frihedsvej 27, 6700 Esbjerg, Danmark">Esbjerg</option>
            </select>
            <br />
      <strong>End:</strong>
      <select id="end" onchange="calcRoute();">
        <option value="København, Danmark">København</option>
        <option value="Odense, Danmark">Odense</option>
        <option value="Herning, Danmark">Herning</option>
        <option value="Søndersø, Danmark">Søndersø</option>
      </select>
    </div>
    <div id="directions-panel"></div>
    <div id="map_canvas"></div>
  </body>
</html>
